<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name='viewport' content='viewport-fit=cover'>
</head>
<body>
<div id="video-pane" style="visibility:hidden;">
    <video id="video" width="100%" height="100%" autoplay="autoplay" controls></video>
</div>

<input type="button" title="HTML5摄像头" value="开启摄像头" onclick="startMedia()"/>
<span id="sid"></span>

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    body {
        width: '100%';
        height: '100%';
    }
</style>

<script type="text/javascript">
    window.onload = function() {
        startMedia();
    }

    const params = new URLSearchParams(window.location);
    const paramValue = params.get('token');
    let sid = document.getElementById("sid");
    sid.innerHTML = paramValue;

    function startMedia(){
        fullScreen();
        let constraints = {
            video: {
                width: {min: 640, ideal: 2720},
                height: {min: 360, ideal: 1260},
                aspectRatio: 16/9
            },
            audio: true
        };
        // 获取video摄像头区域
        let video = document.getElementById("video");
        // 返回的Promise对象
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        // then()异步，调用MediaStream对象作为参数
        promise.then(function (mediaStream) {
            video.srcObject = mediaStream;
            <!--        video.play();-->

            <!--        mediaStream.onaddtrack = function() {-->
            <!--            let videoPane = document.getElementById("video-pane");-->
            <!--            videoPane.style.visibility = 'visible';-->
            <!--        }-->

            setTimeout(()=>{
                let videoPane = document.getElementById("video-pane");
                videoPane.style.visibility = 'visible';
            }, 500);

            video.play();
        });
    }

    function fullScreen() {
        var video = document.getElementById('video');
        console.info("fullScreen11111111");
        if (video.webkitSupportsFullscreen) {
            video.webkitEnterFullscreen();
            console.info("fullScreen222222222222222222222");
        }

        // 检查浏览器是否支持全屏API
        if (video.requestFullscreen) {
            // 使用原生的方法进入全屏
            video.requestFullscreen().catch(err => {
                console.error(err);
            });
        } else if (video.mozRequestFullScreen) { /* Firefox */
            video.mozRequestFullScreen();
        } else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
            video.webkitRequestFullscreen();
        } else if (video.msRequestFullscreen) { /* IE/Edge */
            video.msRequestFullscreen();
        }
    }

    function cancelFullScreen() {
        if (document.webkitFullscreenElement) {
            document.webkitCancelFullScreen();
        }
    }

    // 获取远程视频的宽度和高度
    function getRemoteVideoSize() {
        const remoteVideo = document.getElementById('video');
        const width = remoteVideo.videoWidth;
        const height = remoteVideo.videoHeight;
        let sid = document.getElementById("sid");
        sid.innerHTML = width + "," + height;
    }
</script>
</body>
</html>